/*
 * @Author: 史许荣
 * @Date: 2022-08-01 10:57:57
 * @LastEditors: 史许荣
 * @LastEditTime: 2022-08-04 15:22:15
 * @Description: file content
 * @FilePath: \react-three-fiber-new\src\tags.js
 */
import * as THREE from 'three'
import React, { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import { Html,Image,Text } from '@react-three/drei'

export default function Tags({ name, position }) {
    const ref = useRef()
    useFrame(({ camera }) => {
        ref.current.quaternion.copy(camera.quaternion)
      })
    return (<group scale={2.5} ref={ref} position={position}>
            <mesh>
                <Html rotation={[Math.PI , Math.PI, Math.PI]} transform>
                    <div className="annotation">
                        <div></div>
                        <div>{name}</div>
                    </div>
                </Html>
            </mesh>
        </group>
    )
}